import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// import Icons from 'unplugin-icons/vite'
// import IconsResolver from 'unplugin-icons/resolver'

import UnoCss from 'unocss/vite'
import { presetUno, presetIcons, presetTagify } from 'unocss'

import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),

    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      // 也就是使用 import * from 'vue'，识别导入的是 'vue'，就会自动导入
      imports: ['vue'],
      // 自动导入 element plus 中的相关API
      resolvers: [ElementPlusResolver()],
      dts: 'src/types/declaration-files/auto-imports.d.ts'
    }),

    Components({
      // https://github.com/unplugin/unplugin-vue-components/blob/7c8ca4634b9b05e4749d0884ac05e5fc1bf8725a/src/core/options.ts#L8
      /*
      启动了 Components 插件进行自动导入，那么这里默认配置
      大白话：只要自动了 Components 插件自动导入，会自动导入 src/components 的组件

        dirs: 'src/components',
        extensions: 'vue',
        deep: true,
        dts: isPackageExists('typescript'),

        directoryAsNamespace: false,
        collapseSamePrefixes: false,
        globalNamespaces: [],

        resolvers: [],

        importPathTransform: v => v,

        allowOverrides: false,
      */
      resolvers: [
        // 自动导入 element plus 中的相关vue组件
        ElementPlusResolver()
        // 配置下载安装的图标自动导入，使用 unocss 即可 1
        // IconsResolver({
        //   // prefix: 'i', // 图标识别自动导入的前缀，默认值是 'i'
        //   enabledCollections: ['ep'] // 能使用的集合名称，可以根据官网 https://icones.js.org/collection/ep 查看
        // })
      ],
      // 该项自动导入全局声明，会自动生成ts类型文件
      dts: 'src/types/declaration-files/components.d.ts'
    }),

    // 开启自动从网络下载安装图标，使用 unocss 即可 2
    // Icons({
    //   autoInstall: true
    // }),

    UnoCss({
      presets: [
        presetUno(),
        presetIcons({
          extraProperties: {
            display: 'inline-block',
            'vertical-align': 'middle'
          }
        }),
        presetTagify()
      ]
    }),

    viteMockServe({
      mockPath: 'mock',
      enable: true
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/var.scss";@import "@/assets/styles/mixin.scss";`
        // includePaths: ['./src/assets'] // 这里是SCSS预处理器在解析导入时搜索的路径
      }
    }
  },
  server: {
    port: 5555
  }
})
